<template>
<div class="table-container">
    <el-form :model="queryForm" ref="queryForm" label-width="80px">
        <el-row :gutter="20">
            <el-col :span="8">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="queryForm.title"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="申请单号" prop="applicationNum">
                    <el-input v-model="queryForm.applicationNum"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="状态" prop="status">
                    <el-select v-model="queryForm.status" placeholder="请选择">
                        <el-option label="草稿" value="0"></el-option>
                        <el-option label="审核中" value="1"></el-option>
                        <el-option label="驳回" value="2"></el-option>
                        <el-option label="已办结" value="3"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-form-item label="申请日期" prop="applicationDate">
                    <el-date-picker v-model="queryForm.applicationDate"></el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="申请人" prop="applicantId">
                    <el-select v-model="queryForm.applicantId" placeholder="请选择" @focus="fetchApplicants">
                        <el-option v-for="applicant in applicants" :key="applicant.id" :label="applicant.name" :value="applicant.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="申请部门" prop="departId">
                    <el-select v-model="queryForm.departId" placeholder="请选择" @focus="fetchDeparts">
                        <el-option v-for="depart in departs" :key="depart.id" :label="depart.name" :value="depart.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-form-item label="调出使用部门" prop="outDeptId">
                    <el-select v-model="queryForm.outDeptId" placeholder="请选择" @focus="fetchDeparts">
                        <el-option v-for="depart in departs" :key="depart.id" :label="depart.name" :value="depart.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="调入部门" prop="intoDeptId">
                    <el-select v-model="queryForm.intoDeptId" placeholder="请选择" @focus="fetchDeparts">
                        <el-option v-for="depart in departs" :key="depart.id" :label="depart.name" :value="depart.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="调出日期" prop="outDate">
                    <el-date-picker v-model="queryForm.outDate"></el-date-picker>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-form-item label="调入日期" prop="intoDate">
                    <el-date-picker v-model="queryForm.into"></el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="创建人" prop="creatorId">
                    <el-select v-model="queryForm.creatorId" placeholder="请选择" @focus="fetchApplicants">
                        <el-option v-for="creator in applicants" :key="creator.id" :label="creator.name" :value="creator.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="创建时间" prop="created">
                    <el-date-picker v-model="queryForm.created"></el-date-picker>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="16">
                <el-form-item label="调拨说明" prop="allocateDesc">
                    <el-input v-model="queryForm.allocateDesc"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" @click="submitQuery">查询</el-button>
            </el-col>
            <el-col :span="2">
                <el-button @click="resetQuery">重置</el-button>
            </el-col>
        </el-row>
    </el-form>
    <el-button type="primary" @click="addData">新增</el-button>
    <el-button type="primary" @click="exportData">导出</el-button>
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column type="index" label="序号" :index="indexMethod">
        </el-table-column>
        <el-table-column prop="state" label="状态">
            <template slot-scope="scope">
                <span :class="getStateButtonType(scope.row.state)" class="state-span">
                    {{ getStateDisplay(scope.row.state) }}
                </span>
            </template>
        </el-table-column>
        <el-table-column prop="applicationDate" label="申请日期" :formatter="formatDate" width="100" />
        <el-table-column prop="applicationNum" label="申请单号" width="170" />
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="applicant" label="申请人" />
        <el-table-column prop="depart" label="申请部门" />
        <el-table-column prop="outDepart" label="调出使用部门" width="150" />
        <el-table-column prop="intoDepart" label="调入部门" />
        <el-table-column prop="outDate" label="调出日期" :formatter="formatDate" width="150" />
        <el-table-column prop="intoDate" label="调入日期" :formatter="formatDate" width="150" />
        <el-table-column prop="allocateDesc" label="调拨说明" width="200" />
        <el-table-column prop="remark" label="备注" width="200" />
        <el-table-column label="调拨资产明细" width="120">
            <template slot-scope="scope">
                <el-button type="text" size="small" @click="handleViewDetail(scope.row)">
                    查看明细
                </el-button>
            </template>
        </el-table-column>
        <el-table-column prop="creator" label="创建人" />
        <el-table-column prop="created" label="创建时间" width="180" :formatter="formatTime" />
        <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
                <el-button type="text" size="small" @click="handleQuery(scope.row)">查看</el-button>
                <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[7, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
    <!-- 弹层组件，使用 v-if 控制显示 -->
    <index-detail v-if="showDetailDialog" @close="showDetailDialog = false" :applicationNum="applicationNum"></index-detail>
</div>
</template>

    
<script>
import assetAllocateApi from '@/api/asset-allocate';
import indexDetail from './indexDetail.vue';
import {
    parseTime
} from '@/utils';
import userService from '@/api/user';
import departmentService from '@/api/depart';

export default {
    components: {
        indexDetail
    },
    data() {
        return {
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            total: 0,
            applicationNum: '', // 传递申请单号
            showDetailDialog: false, // 控制弹层显示的变量
            applicants: [], // 存储申请人列表
            departs: [],
            queryForm: {
                title: '',
                applicationNum: '',
                status: '',
                applicationDate: null,
                applicantId: '',
                departId: '',
                outDeptId: '',
                intoDeptId: '',
                outDate: null,
                intoDate: null,
                creatorId: '',
                created: null,
                allocateDesc: ''
            }
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        indexMethod(index) {
            return (index + 1) + (this.currentPage - 1) * this.pageSize; // 返回从1开始的索引
        },
        fetchData() {
            assetAllocateApi.list({
                    page: this.currentPage,
                    limit: this.pageSize
                })
                .then(response => {
                    this.tableData = response.data
                    this.total = response.count
                })
                .catch(error => console.log(error))
        },
        handleClick(row) {
            console.log(row)
        },
        handleSelectionChange() {

        },
        handleViewDetail(row) {
            this.applicationNum = row.applicationNum
            this.showDetailDialog = true; // 显示弹层
        },
        getStateButtonType(state) {
            switch (state) {
                case 0:
                    return 'state-warning';
                case 1:
                    return 'state-primary';
                case 2:
                    return 'state-danger';
                case 3:
                    return 'state-success';
                default:
                    return 'state-info'; // 默认样式
            }
        },
        getStateDisplay(state) {
            switch (state) {
                case 0:
                    return '草稿';
                case 1:
                    return '审核中';
                case 2:
                    return '驳回';
                case 3:
                    return '已办结';
                default:
                    return '未知'; // 默认显示
            }
        },
        formatDate(row, column, cellValue) {
            return parseTime(cellValue, '{y}-{m}-{d}');
        },
        formatTime(row, column, cellValue) {
            return parseTime(cellValue, '{y}-{m}-{d} {h}:{i}:{s}');
        },
        handleSizeChange(newSize) {
            this.pageSize = newSize
            this.fetchData()
        },
        handleCurrentChange(newPage) {
            this.currentPage = newPage
            this.fetchData()
        },
        addData() {
            this.$router.push({
                name: 'allocateAdd'
            })
        },
        handleQuery(row) {
            this.$router.push({
                name: 'allocateQuery',
                query: {
                    applicationNum: row.applicationNum
                }
            })
        },
        handleEdit(row) {
            this.$router.push({
                name: 'allocateEdit',
                query: {
                    applicationNum: row.applicationNum
                }
            })
        },
        exportData() {

        },
        submitQuery() {
            // 提交查询逻辑
            assetAllocateApi.list({
                    page: this.currentPage,
                    limit: this.pageSize,
                    ...this.queryForm // 使用扩展运算符传递整个 queryForm 对象
                })
                .then(response => this.tableData = response.data)
                .catch(error => console.log(error))
        },
        resetQuery() {
            this.$refs['queryForm'].resetFields();
        },
        exportData() {
            // 导出数据逻辑
        },
        fetchApplicants() {
            userService.findAll()
                .then(response => this.applicants = response.data)
                .catch(error => console.log(error))
        },
        fetchDeparts() {
            departmentService.findAll()
                .then(response => this.departs = response.data)
                .catch(error => console.log(error))

        }
    }
}
</script>

    
<style>
.state-span {
    padding: 2px 15px;
    /* 根据需要调整 */
    border-radius: 10px;
    /* 圆角 */
    display: inline-block;
    border: 1px solid;
}

.state-warning {
    background-color: #faecd8;
    color: #e6a23c;
}

.state-primary {
    background-color: #d9ecff;
    color: #409eff;
}

.state-danger {
    background-color: #fef0f0;
    color: #f56c6c;
}

.state-success {
    background-color: #f0f9eb;
    color: #67c23a;
}

.state-info {
    background-color: #f4f4f5;
    color: #909399;
}
</style>
